<template>
  <div flex ww3 auto style="flex-wrap:wrap">
    <div class="auto join-wap pos-a flex align-c">
      <dl class="flex align-c" flex-column>
        <dt class="fz18 center">上传</dt>
        <dd class="flex align-c" just-c>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shangchuan"></use>
          </svg>
        </dd>
        云端极速上传
      </dl>

      <dl class="flex align-c" flex-column>
        <dt class="fz18 center">验证</dt>
        <dd class="flex align-c" just-c>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shenfen"></use>
          </svg>
        </dd>
        操作简单快捷验证审核
      </dl>

      <dl class="flex align-c" flex-column>
        <dt class="fz18 center">审核</dt>
        <dd class="flex align-c" just-c>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shenhe"></use>
          </svg>
        </dd>
        认真对待每件作品
      </dl>

      <dl class="flex align-c" flex-column>
        <dt class="fz18 center">销售</dt>
        <dd class="flex align-c" just-c>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xiaoshouzongheqingkuangtongjibiao"></use>
          </svg>
        </dd>
        高额提成
      </dl>

      <dl class="flex align-c" flex-column>
        <dt class="fz18 center">提现</dt>
        <dd class="flex align-c" just-c>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tixian"></use>
          </svg>
        </dd>
        一个工作日内提现
      </dl>
    </div>

    <div class="join-btn auto fff fz16 cur center">开始销售作品</div>
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  }
}
</script>

<style scoped>
.join-wap{
    width: 80%;
    justify-content: space-between;
    padding: 10% 0 6% 0;
}

.join-wap dl{
    font-size: 16px;
    color: var(--nav-color);
}

.join-wap dl dt{
    color: var(--color-black);
}

.join-wap:after{
    content: " ";
    display: block;
    width: 90%;
    border-top: 4px dotted #d7dfe5;
    position: absolute;
    top: 53%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: -1;
}
.join-wap dd{
    width: 96px;
    height: 96px;
    background: var(--light-gray);
    border-radius: 50%;
    margin: 22px 0;
}

.join-wap dl:first-child dd, .join-wap dl:last-child dd{
    background: var(--handbook-blue);
}

.join-wap dd .icon{
    width: 70px;
    height: 70px;
}
.join-btn{
    background-image: linear-gradient(
            135deg,#ff43c5,#da60cf);
    width: 500px;
    height: 60px;
    line-height: 60px;
    border-radius: 10px;

}


/* CSS Document */


ul, li {
    list-style: none outside none;
}
.clearg{zoom:1;}
.clearg:after {
    content: "";
    display: block;
    clear: both;}
img {
    border: 0 none;
}
body {
    font-family:PingFang SC,Helvetica Neue,Helvetica,Tahoma,Microsoft Yahei,sans-serif;
    min-width: 1200px;
}
a{
    text-decoration: none;
}
i{font-style: normal;}
.ww1{width: 100%;}
.h1{height: 100%;}
.auto{margin: 0 auto;}
.fff{color: #ffffff;}
.fz12{font-size: 12px;}
.fz13{font-size: 13px;}
.fz14{font-size: var(--content);}
.fz15{font-size: 15px;}
.fz16{font-size: var(--title-small);}
.fz18{font-size: 18px;}
.center{text-align: center;}
.fz-r{text-align: right;}
.left{float: left;}
.right{float: right;}
.pos-a{position: relative;}
.pos-b{position: absolute;}
.cur{cursor: pointer;}
[ww2]{
    width: 90%;
}


[der]{
    border-bottom: 1px solid #DCDFE6;
}

[blue]{
    color: var(--handbook-blue);
}

[just-c]{
    justify-content: center;
    -webkit-justify-content: center;
}

[spance-b]{
    justify-content: space-between;
    -webkit-justify-content: space-between;
}


[flex-column]{
    flex-direction: column;
    -webkit-flex-direction: column;
}

[over-hideen]{
    overflow: hidden;
    height: 20px;
}

[content]{
    font-size: var(--content);
}

[flex-w1]{
    flex: 1;
    -webkit-flex: 1;
}
[card]{
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}


*, :after, :before {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.left-cont img{
    cursor: pointer;
}

.nav-wap{
    position: relative;
    z-index: 3;
    height: 60px; line-height: 60px;
}
.nav-content, .nav-senod-content{
    width: 95%;
}
.nav-content a{
    color: var(--nav-color);
}
.left-cont img {
    vertical-align: middle;
    width: 71px;
    height: auto;

}
.left-cont a{
    margin: 0 12px;
    font-size: var(--title);
}

.right-cont{
    font-size: var(--content);
    overflow: hidden;
}

.right-cont a{
    margin-left: 22px;
}
.right-cont dt{
    width: 32%; overflow: hidden;
}
.right-cont .ava-img{
    width: 20px;height: 20px;
}
.right-cont .ava-img img{
    object-fit: cover;height: 100%;
    vertical-align: sub;
}

.list-head.nav-wap{
    background: var(--head-bg);
}

.list-nav-senod.list-nav-senod{
    background: var(--list-nav-bg);
}
.nav-senod{
    background: var(--nav-bg);
    height: 38px;
    line-height: 38px;
    color: var(--nav-color);
    z-index: 2;


}

.nav-senod-content .left{
    display: none;
}
.nav-senod-content .left.nav-senod-show{
    display: block;
}

.nav-senod-content, .scroll-list{
    overflow: hidden;
}
.nav-senod a{
    color: var(--nav-color);
    margin-right: 12px;
    font-size: var(--title-small);

}

.nav-senod-content a:hover, .nav-content a:hover, .nav-content a.nav-act{
    color: var(--nav-hover);
}

.nav-senod .right{
    overflow: hidden;
    text-align: right; font-size: 13px;
    height: 38px;
}
.scroll-list{

    /*-webkit-animation: 10s rowup linear infinite normal;
    animation: 10s rowup linear infinite normal;*/
}

.pic-list-wap{
    width: 1200px;
}


@-webkit-keyframes rowup {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, -38px, 0);
        transform: translate3d(0, -38px, 0);
    }
}
@keyframes rowup {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, -38px, 0);
        transform: translate3d(0, -38px, 0);
    }
}


.nav-third{
    top:100%; background: var(--chilid-nav-bg);
    left: 0;
    padding: 1% 0; display: none;
    z-index: 1;
}
.nav-third-wap dl{
    display: none;
}
.nav-third-wap dt{}

.arrow:after {
    content: "";
    display: inline-block;
    border: 10px solid transparent;
    border-top-width: 0;
    border-bottom-color: #fff;
}
.arrow{
    -webkit-transition: all .3s;
    transition: all .3s;
    bottom: -15px;
    width: 10px;

}

.nav-third-wap a:hover, .red a:hover, .red-cont:hover, .c-red{
   /* background: #f6f9fc;*/
    color: var(--nav-hover-red);
}
.nav-third-wap a{
    color: var(--color-black); padding: 0 2%; margin: 0;
}


.nav-third-wap{
    width: 95%;
}

[space-be]{
    justify-content: space-between;
    -webkit-justify-content: space-between;
}

[space-arrow]{
    justify-content: space-around;
    -webkit-justify-content: space-around;
}

.head-search{
    border: 1px solid #6f6f6f;
    background: #f5f5f5;
    border-right: none;
    height: 38px; line-height: 38px;
    flex: 1;
    margin-right: 12px;

}
.head-search input{
    border: none;
    outline: none;
    background: none;
    flex: 1;
    color: var(--nav-color);
    text-indent: 2%;
}
[transition]{
    -webkit-transition: all .5s;
    transition: all .5s;
}
.tag-box{

}
.tag-box dt{
    margin-right: 20px;
}
.tag-box dd{
    background: var(--search-btn-color);
    padding: 0 12px;
    border: 1px solid  var(--search-btn-color);
}
.tag-wap{
    color: var(--color-black);
    font-size: var(--chilid-nav-bg);
    padding: 0 10px;
    text-transform: uppercase;
}
.tag-list{
    background: #fff;
    padding: 0px 20px;
    left: 0;
    top: 100%;
    width: 100%;
    min-height: 58px;
    display: none;
    -webkit-box-shadow: 0 1px 4px 0 rgb(0 0 0 / 30%);
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 30%);

}
.tag-list li{
    margin: 8px 0;
    height: 20px;
    line-height: 20px;
    cursor: pointer;
    text-transform: uppercase;
}
.shop-num{
    background:red;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    line-height: 20px;
    text-align: center;
    font-size: 11px;
    color: #fff;
    left: 15px;
    top: 8px;
}
.shop-num.no-num{
    background: var(--grey);
}

/*缩略图*/
.material-wap-pub{
    display: flex;
    display: -ms-flex ;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    width:1200px;
}


.material-wap-pub dl{
    -webkit-box-shadow: 0 2px 5px 0 rgb(135 152 164 / 8%);
    box-shadow:0 2px 5px 0 rgb(135 152 164 / 8%);
    -webkit-transform: translateY(0);
    -webkit-transition: all .5s;
    transition: all .5s;
    flex: 0 0 25%;
    width: 25%;
    margin-bottom: .7%;

}
.material-wap-pub dt, .material-wap-pub dd{
    width: 290px;
    height: 160px;
}
.material-wap-pub dl:hover{

    -webkit-box-shadow: 0 0 15px 0 rgb(135 152 164 / 8%);
    box-shadow: 0 0 15px 0 rgb(135 152 164 / 8%);
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
}

.material-wap-pub dl img{
    width: 100%; height: 100%;
    opacity: .9;
    object-fit: fill;
}
.material-wap-pub a{
    display: block;width: 100%;overflow: hidden;
    height: 100%;
}
.flex{
    display: flex;
    display: -ms-flex ;
}
.align-c{
    -webkit-align-items: center; align-items: center;
}

.raduis:before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 10px
;
}
.swiper-wrapper{
    overflow: hidden;
}

.hide{
    display: none;
}
.green{
    background-color: #02d4b1; border-radius: 4px;
}
.search-lcont-wap .down-cont, .search-cont-l input{
    font-size: 13px; line-height: 36px;
    color: #5e5453;
}
.search-wap input{
    border: none; outline: none;
    background: none; width: 80%;
    color: var(--nav-color);
    text-indent: 2%;
}
.search-wap input::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #5e5453;
}
.search-wap input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #5e5453;
}
.search-wap input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #5e5453;
}
.search-wap input:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #5e5453;
}
.search-wap{
    height: 100%;
}
.search-lcont-wap span{
    height: 12px; width: 1px;
    background: #6b6662;margin-right: 6px;
}
.search{
    border: 1px solid #6f6f6f;
    border-right:none ;
    background: #fff;
    width: 92%;
    height: 100%;
    font-size: var(--content);
}
.search-tag{
    width: 20%;
    display: flex;
    justify-content: flex-end;
    padding-right: 2%;
}

.search input{
    width: 80%;
    font-size: var(--content);
}
.tag-wap{
    color: var(--color-black);
}
.search-tag{
     width: 20%;
     display: flex;
     justify-content: flex-end;
     padding-right: 2%;
 }
.search-btn{
    flex: 1;
    background: #fe43c4;
    color: #fff;

}
.nav-left .pos-b{
    height: 2px;
    width: auto;
    background: #fff;
    top: 95%;
    left: 0;
    transition: all .3s;
    -webkit-transition: all .3s;
}
.left-wap1.nav-left   .pos-b{
    background: #010200;
}
.links a{
    padding-top: 2%;
    color: var(--color-black);
    font-size: var(--content);
    margin-right: 12px;
    padding-bottom: 6%;
}

.footer-wap{
    padding: 2.4% 0;
    background:var(--footer-bg);
    font-size: var(--content);


}

.footer-wap .foot-bar{
    border-bottom: 1px solid var(--nav-color);
    padding-bottom: 6px;
}
.foot-l{
    flex: 1;
}
.foot-l a{
    color: var(--footer-color);
    font-size: var(--content);
    margin-right: 10px;
}
.foot-l a:hover, .foot-r, .foot-cont .foot-l{
    color: var(--nav-color);
}
.foot-r, .foot-cont .foot-l{
    font-size: var(--content);

}
.foot-cont{
padding-top: 1.6%;
}

.foot-cont p{
    padding-bottom: 4px;
}
.foot-cont .foot-r{
    width: 66px;
    flex: 0 0 66px;
}
.material-wap dl, .list-wap dl{
    overflow: hidden;
    font-size: var(--small);
}

.list-wap dl{
    height: 160px;

}
.list-wap video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.list-top, .material-info{
    padding: 0 2%;

}
.list-top p span{
    width: 80%;
    flex: 0 0 80%;
}

.material-wap-pub dl:hover  .list-top{
    transform: translateY(6px);
    -webkit-transition: all .3s;
    transition: all .3s;
    z-index: 1;
}

.list-top{
    top:0px; left: 0;transform: translateY(-100%);
    z-index: -1; line-height:20px;
}
.list-wap dd{
    bottom: 12px;
}

.list-top, .material-info{
    text-shadow: 0px 2px 2px rgb(56 50 50 / 70%);
}

.list-top , .list-wap dd a, .material-info{
    color: var(--small-color);
}

.list-top p{
    align-items: center;
}

.list-wap dd a{

    display: flex;
    display: -moz-flex;
    display: -ms-flex;

}




.material-wap dl a {
    height: 160px;
}
.list-wap dl a  {
    height: 160px;
}


.material-info{

    bottom: 4px;
    display: flex;
    justify-content: space-between;


}

.material-info .left{
    float: none;
    flex: 1;
}
.nav-wap .head-search{
    margin: 0 60px;
}
input[type="number"] {
    -moz-appearance: textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}
.footer-wap .auto2.auto3{
    margin-top: 1%;
}
.footer-wap .auto2 {
    width: 85%;
    margin: 8% auto 0 auto;
}



@media screen and (max-width: 1300px) {
    .nav-senod a{
        font-size: var(--content);
    }
}

</style>